// Variables
// -----------------------------------------------------------------------------

@header-height: 55px;


// Fixes
// -----------------------------------------------------------------------------

/* ui bootstrap click to pointers */
.nav,
.pagination,
.carousel,
.panel-title a {
  cursor: pointer;
}



// Page wide
// -----------------------------------------------------------------------------
html,
body {
  height: 100%;
}

.fonts-top-container,
.top-overlay,
.box {
  min-width: 900px;
}

.fonts-top-container,
.row-fluid {
  height: 100%;
}

.fonts-top-container:before,
.fonts-top-container:after,
.column:before,
.column:after {
  content: "";
  display: table;
}

.fonts-top-container:after,
.column:after {
  clear: both;
}


// Header
// -----------------------------------------------------------------------------

.top-overlay {
  height: @header-height;
  padding: 10px 15px 25px 15px;
  border-bottom: #eee solid 1px;
  background: #fff;
}

.page-header {
  margin: 0;
  border-bottom: none;
  float: left;
}

.nav-push-right {
  float: right;
}

.actNavButton {
  i {
    font-size: 16px;
  }
}

.actSponsorButton {
  padding: 0;
  margin-left: 4px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
}

@keyframes show {
  100% {
    opacity: 1;
    transform: none;
  }
}

.actSponsorButtonUser {
  border-radius: 50%;
}

.actSponsorButtonOrganization {
  border-radius: 8px;
}

.sponsorheart {
  color: #DB61A2;
}

.sponsor-img {
  height: 34px;
  width: 34px;
}

.sponsor-img-overlay {
  height: 34px;
  width: 34px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #DB61A2;
  opacity: 0.05;
}

.sponsor-img-overlay:hover {
  opacity: 0.4;
}

.ordering {
  float: left;
  margin-bottom: 5px;
}


// search

#searchwrap {
  width: 100%;
}

#searchinput {
  width: 100%;
  font-size: 11px;
}

#searchclear {
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  height: 14px;
  margin: auto;
  font-size: 14px;
  cursor: pointer;
  color: #ccc;
  display: none;
}

#searchclear.show {
  display: initial;
  z-index: 1000;
}

#orderButton {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

// Masthead first page
// -----------------------------------------------------------------------------

.masthead {
  margin-left: -15px;
  margin-right: -15px;
  background-color: transparent;
  background: linear-gradient(fade(#fff, 0%), fade(#fff, 100%));
  position: relative;
}

.masthead:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('/assets/images/swirl.png') repeat;
  opacity: 1;
  z-index: -2;
}

.pulse {
  -webkit-animation: pulse 1s infinite;
  -moz-animation: pulse 1s infinite;
  -o-animation: pulse 1s infinite;
  animation: pulse 1s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }

  50% {
    -moz-transform: scale(1.3);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@-o-keyframes pulse {
  0% {
    -o-transform: scale(1);
  }

  50% {
    -o-transform: scale(1.3);
  }

  100% {
    -o-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}


// Scroll colums
// -----------------------------------------------------------------------------

.box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: @header-height;
}

.column {
  height: 100%;
  overflow: auto;
  *zoom: 1;
}

.scrollerLeft {
  background: #eee;
}

.scrollerRight {}

// Font content
// -----------------------------------------------------------------------------

// #previewFontSizeInput {
//   width: 50px;
// }

.dl-horizontal.variantList {
  margin-bottom: 0px;

  dt {
    width: auto;
  }

  dd {
    margin-left: 120px;
  }
}

.list-group {
  padding-top: 10px;
  padding-bottom: 10px;
}

.list-group-item.active h5 small {
  color: #efefef;
}

.list-group-item-heading {
  margin-top: 0px;
  margin-bottom: 0px;
}

.download-button {
  white-space: normal;
  //   margin-top: 30px;
}

.head-right-block {
  margin-top: 54px;
}

.folderPrefixBar {
  margin-bottom: 12px;
  margin-top: 12px;
}

.nav-tabs {
  margin-bottom: 5px;
}

.fontItemCSSWrap {
  margin-top: 20px;
  padding-top: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
}

#fontPreviewToggle {
  margin-top: 12px;
}

.cssCodeStyle {
  background: #eee;
  padding-top: 8px;
  padding-bottom: 8px;
}

ul.nav.nav-pills {
  padding-bottom: 10px;
  margin-bottom: 5px;
}

// Erros
// -----------------------------------------------------------------------------

.apiError {
  display: none;
}

.apiError.show {
  display: initial;
}

// General
// -----------------------------------------------------------------------------

pre {
  font-size: 80%;
}

code {
  font-size: 75%;
}

textarea {
  resize: none;
}

.mini {
  font-size: 70%;
}